<template>
  <div class="account">
    <div class="accountHeader">
      <div>我管理的账号</div>
      <el-button type="primary" size="small" round @click="bindDy">
         + 绑定抖音企业
      </el-button>
    </div>
    <div>

    </div>
    <el-table :data="tableData"  size="small" v-show="!correlationLoading"
      style="width: 100%;"
      border
      :header-cell-style="{ background: '#f4f4f4', color: '#000' }"
    >
      <el-table-column type="index" label="序号" />
      <el-table-column prop="nickName" label="抖音企业号"  />
      <el-table-column prop="accountStatus" label="状态"  >
        <template #default="{row}">
          <el-switch :active-value="1" :inactive-value="0" @click="changeStatus(row)" v-model="row.accountStatus" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="expireTime" label="授权有效期">
        <template #default="{row}">
          {{formatDate(row.expireTime * 1000)}}
         </template>
      </el-table-column>
<!--      <el-table-column label="操作" align="center" width="100px">-->
<!--        <template #default="{row}">-->
<!--          <el-button link type="primary" size="small" @click="openSet(row.id)">设置</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <DYSet ref="DYSetRef"></DYSet>

  </div>
  <!--  管理loading  -->
  <div class="correlationLoading" v-if="correlationLoading">
    <div class="correlationLoadingBox">
      <div>请您注意</div>
      <div>请在新打开的窗口中完成授权</div>
      <div style="margin: 0 auto">
        <el-button size="small" type="primary" @click="resetBtn">授权成功</el-button>
        <el-button size="small" type="primary" @click="resetBtn">授权失败</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref} from 'vue'
import { get_bind_account_list, setting_account_status } from "@/api/settingtApi"
import {formatDate} from "@/utils/d_times"
import DYSet from "./dYSet"
import {ElMessage} from "element-plus";

const DYSetRef= ref()
const openSet = (val) => {
  DYSetRef.value.openDYSet(val)
}
onMounted(() => {
  getTableList()
})

const tableData = ref([])
const getTableList = async () => {
  const res = await get_bind_account_list()
  tableData.value = res.data || []
}

const changeStatus = (item) => {
  setting_account_status({
    id: item.id,
    accountStatus: item.accountStatus
  }).then(res => {
    ElMessage.success(res.msg)
  })
}

const correlationLoading = ref(false)
const bindDy = () => {
  correlationLoading.value = true
  window.open("https://open.douyin.com/platform/oauth/connect?client_key=awpw7phbojeeds4i&response_type=code&scope=user_info,im.direct_message,im.recall_message,item.comment,im.message_card,im.microapp_card,fans.check,tool.image.upload,renew_refresh_token,jump.basic,jsb.open.showAuth&redirect_uri=https://chat.inwuoo.com/give")
}

const resetBtn = () => {
  correlationLoading.value = false
  getTableList()
}

</script>

<style scoped lang="scss">
.accountHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
}
::v-deep .el-table__cell {
  position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
}
.correlationLoading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.8);
  z-index: 2;
  .correlationLoadingBox {
    position:relative;
    top: 10px;
    left: 50%;
    width: 300px;
    padding: 10px;
    border-radius: 5px;
    transform: translateX(-50%);
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 150px;
  }
}
</style>